﻿@page "/query-builder/column-template"

@using BlazorDemos
@using blazor_griddata
@using Syncfusion.Blazor.QueryBuilder
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the Column Template functionality in QueryBuilder component using DropDownList and RadioButton components. In the Country column, user can change the Operator as equal/not equal using RadioButton component and select the Value from DropDownList component.</p>
</SampleDescription>
<ActionDescription>
    <p>
        This sample illustrates how to integrate <a target="" _blank="" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.QueryBuilder.QueryBuilderTemplates.html#Syncfusion_Blazor_QueryBuilder_QueryBuilderTemplates_ColumnTemplate">ColumnTemplate</a> to the columns in the QueryBuilder. This is used for creating custom user interface for the columns with custom components and update the rule collection by using the component events. This can be specified by using ColumnTemplate directive of QueryBuilderColumn directive. Inside the Template, you can access the data using the implicit named parameter <strong>Context</strong>. 
    </p>
    <p>More information about Blazor QueryBuilder Column Template can be found in this <a target="" _blank"" href="https://blazor.syncfusion.com/documentation/query-builder/templates/#column-template">documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfQueryBuilder TValue="Employee" @ref="QueryBuilderObj">
        <QueryBuilderRule Condition="and" Rules="@rules"></QueryBuilderRule>
        <QueryBuilderColumns>
            <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn>
            <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="LastName" Label="Last Name" Type="ColumnType.String"></QueryBuilderColumn>
            <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn>
            <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String">
                <QueryBuilderTemplates>
                    <ColumnTemplate>
                        <div class="e-rule-filter">
                            @{
                                string field = (string)context.Field;
                                string value = (string)context.Value;
                                string checkedValue = (string)context.Operator;
                                string radioGroupName = "rule_" + Guid.NewGuid();
                            }
                            <SfDropDownList @bind-Value="@field" TItem="string" TValue="string" DataSource="@Columns">
                                <DropDownListEvents TItem="string" TValue="string" ValueChange="e => changeField(e, context)"></DropDownListEvents>
                            </SfDropDownList>
                        </div>
                        <div class="e-rule-operator e-operator">
                            <SfRadioButton Label="Is Equal" Name="@radioGroupName" Value="equal" Checked="@checkedValue" @onchange="@((e) => changeOperator(e, context))"></SfRadioButton>
                            <SfRadioButton Label="Is Not Equal" Name="@radioGroupName" Value="notequal" Checked="@checkedValue" @onchange="@((e) => changeOperator(e, context))"></SfRadioButton>
                        </div>
                        <div class="e-rule-value e-value">
                            <SfDropDownList @bind-Value="@value" TValue="string" Placeholder="Select Country" TItem="Country" DataSource="@CountriesList">
                                <DropDownListFieldSettings Text="Name"></DropDownListFieldSettings>
                                <DropDownListEvents TItem="Country" TValue="string" ValueChange="e => changeValue(e, context)"></DropDownListEvents>
                            </SfDropDownList>
                        </div>
                    </ColumnTemplate>
                </QueryBuilderTemplates>
            </QueryBuilderColumn>
        </QueryBuilderColumns>
    </SfQueryBuilder>
</div>

@code
{
    SfQueryBuilder<Employee> QueryBuilderObj;
    
    public class Employee
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
        public string Country { get; set; }
    }

    public string[] Columns = new string[] {
        "EmployeeID", "FirstName", "LastName", "HireDate", "Country"
    };

    public class Country
    {
        public string Name { get; set; }
    }

    private List<RuleModel> rules = new List<RuleModel>()
    {
        new RuleModel { Label="First Name", Field="FirstName", Type="String", Operator="equal", Value="Nancy" },
        new RuleModel { Label="Country", Field="Country", Type="String", Operator="equal", Value="USA" }
    };

    public List<Country> CountriesList = new List<Country>() {
        new Country(){ Name = "England" },
        new Country(){ Name = "India" },
        new Country(){ Name = "Spain" },
        new Country(){ Name = "USA" }
    };

    private void changeField(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, string> args, RuleModel Rule)
    {
        Rule.Field = args.Value;
        Rule.Label = args.Value;
        Rule.Type = "String";
    }

    private void changeValue(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Country> args, RuleModel Rule)
    {
        Rule.Value = args.Value;
    }

    private void changeOperator(Microsoft.AspNetCore.Components.ChangeEventArgs args, RuleModel Rule)
    {
        Rule.Operator = args.Value;
    }
}